<template>
  <div class="search-hot">
      <h5>热门搜索</h5>
      <div v-if="hotword.length>0" class="word">
        <span @click="$emit('changekeyword',word.first)" v-for="(word,index) in hotword" :key="index">{{word.first}}</span>
      </div>
      <music-loading v-else></music-loading>
      <ul>
        <li v-for="(word,index) in wordHistory" :key="index">{{word}}
        <span @click="span">X</span></li>
      </ul>
  </div>
</template>

<script>
import MusicLoading from './MusicLoading.vue';
export default {
  props:{
    wordHistory: Array,
  },
  data(){
    return {
      hotword:[],
    }
  },
  created(){
     this.gethot();
    //  this.getHistory();
  },
  methods:{
     async gethot(){
       let re=await this.axios.get("/search/hot");
      // console.log(re);
       this.hotword=re.result.hots;
     },
    //  getHistory(){//获取历史记录
    //    let re=localStorage.getItem("searchhistory");
    //    console.log(re)
    //   //  使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
    //    this.wordHistory=JSON.parse(re); 
    //  },
     span(index){
       this.wordHistory.splice(index,1);
       this.$emit("delhot", this.wordHistory);
     }
  },
  components:{
    MusicLoading
  }
}
</script>

<style lang="less" scoped>
.search-hot{
  padding:0px 8px;
  h5{
    font-size:12px;
    color:#666;
  }
  li{
    margin-top: 10px;
    border-bottom: 1px solid #eee;
    span{
      float: right;
    }
  }
  .word{
    display: flex;
    flex-wrap: wrap;
    span{
      padding:7px 10px;
      margin:8px 8px 0px 0px;
      border:1px solid #dad9d9;
      border-radius: 14px;
      font-size:14px;
      color:#444;
    }
  }
}
</style>